import React from "react";
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.querySelector("#root"));
// root.render(1);
// root.render("abc");
// root.render(true);
// root.render(false);
// root.render(undefined);
// root.render(null);

// root.render("<a>百度</a>");

// jsx--->javascript xml
// root.render(<a href="http://www.baidu.com">百度</a>);

// 1- 有且只能是一个根元素
// 2- 书写建议：如果元素较多，建议包裹在括号内。
// root.render((
//     <div>
//         <a href="http://www.baidu.com">百度</a>
//         <a href="http://www.QQ.com">QQ</a>
//     </div>
// ))

// 首字母大写会被作为组件去解析。
// jsx: 数据值是undefined,null,true,false不会进行任何渲染。
// 类组件:
class Div extends React.Component{
    state = {
        num:1,
        a:2,
        str:"ssss"
    }
    render(){
        // return 1;
        // return undefined;
        // return <div>1</div>
        return (
            <div>
                <h3 onClick={()=>{
                    this.setState({
                        num:this.state.num+1
                    })
                }}>{this.state.num}</h3>
            </div>
        )
    }
    // componentDidUpdate(prevProps, prevState, snapshot) {
    // }
    //
    // componentDidMount() {
    //     console.log("挂载完毕之后")
    // }
    // componentWillUnmount() {
    //     console.log("卸载之前执行")
    // }
}
// 函数组件
root.render((
    <Div>

    </Div>
))